<template>
	<view class="f26r col313131">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="会员信息" back @onBack="goBack" @topTotalHeight="topTotalHeight"
		></navbar>
		<view class="backColWhite lh88r f28r teAliCenter borB1SE6e6e6">
			<view :class="['wPer33S333333', 'disInBlo', 'poRel',
					nowCurrent == 0 ? 'foWeiBold col99c043' : ''
				]" @click="cliTopList(0)"
			>
				我的会员
				<text class="w50r h4r backCol99c043 poAbs bom0 left50P trTrXn50P"
					v-show="nowCurrent == 0"
				></text>
			</view>
			<view :class="['wPer33S333333', 'disInBlo', 'poRel',
					nowCurrent == 1 ? 'foWeiBold col99c043' : ''
				]" @click="cliTopList(1)"
			>
				购买历史
				<text class="w50r h4r backCol99c043 poAbs bom0 left50P trTrXn50P"
					v-show="nowCurrent == 1"
				></text>
			</view>
			<view :class="['wPer33S333333', 'disInBlo', 'poRel',
					nowCurrent == 2 ? 'foWeiBold col99c043' : ''
				]" @click="cliTopList(2)"
			>
				赠送历史
				<text class="w50r h4r backCol99c043 poAbs bom0 left50P trTrXn50P"
					v-show="nowCurrent == 2"
				></text>
			</view>
		</view>
		<swiper @change="swiperChaFun" :current="nowCurrent"
			:style="'min-height: ' + 'calc(100vh - ' + calcNum + 'px);'"
		>
			<swiper-item class="overYS">
				<view class="backColWhite bSha0010u0rgb00001 borRad10r pl20r pr20r pb20r m20r">
					<view class="lh80r">
						我的会员卡基础信息
					</view>
					<view class="teAliCenter col999 lh80r" v-if="myCardInfo == ''">
						暂无会员卡
					</view>
					<view class="disFlex" v-else>
						<view :class="['flex1', myCardInfo.type == 1 ? 'col47ce68' : 'colC72d21']">
							<text class="col999">
								会员卡状态：
							</text>
							{{
								myCardInfo.type == 1 ? '使用中' :
								myCardInfo.type == 2 ? '已到期' : myCardInfo.type
							}}
						</view>
						<view class="flex1 teAliRight">
							<text class="col999">
								到期时间：
							</text>
							{{myCardInfo.end_date}}
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" :refresher-triggered="data0Tri"
					@refresherrefresh="orderRefresh"
				>
					<view class="p20r">
						<view v-for="item in data0List" :key="item.id"
							class="backColWhite bSha0010u0rgb00001 borRad10r p20r mb20r"
						>
							<view class="">
								<text class="col999">
									订单号：
								</text>
								{{item.out_trade_no}}
							</view>
							<view class="disFlex mt20r">
								<view class="flex1">
									<text class="col999">
										购买时长：
									</text>
									{{item.month}}个月
								</view>
								<view class="flex1 teAliRight">
									<text class="col999">
										购买/赠送：
									</text>
									{{
										item.source == 1 ? '购买' :
										item.source == 2 ? '赠送' : item.source
									}}
								</view>
							</view>
							<view class="disFlex mt20r">
								<view :class="['flex1', item.type == 1 ? 'colC72d21' : 'col47ce68']">
									<text class="col999">
										已支付/未支付：
									</text>
									{{
										item.type == 1 ? '未支付' :
										item.type == 2 ? '已支付' : item.type
									}}
								</view>
								<view class="flex1 teAliRight colFf3627">
									<text class="col999">
										购买价格：
									</text>
									¥{{item.price}}
								</view>
							</view>
							<view class="mt20r">
								<text class="col999">
									创建时间：
								</text>
								{{item.date}}
							</view>
						</view>
						<view class="lh100r teAliCenter col999" v-if="data0More == true && data0List.length">
							已加载全部
						</view>
						<view class="poAbs top50P left50P trTrn50Pn50P teAliCenter col999" v-if="data0List.length == 0">
							暂无数据
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="overYS">
				<scroll-view scroll-y="true" class="hPer100 poRel" @scrolltolower="orderScroll"
					:refresher-enabled="true" :refresher-triggered="data1Tri"
					@refresherrefresh="orderRefresh"
				>
					<picker @change="picChaFun0" :value="picVal0" :range="picAry0" mode="selector"
						class="lh90r backColWhite pl20r pr20r borB1SE6e6e6" range-key="name"
					>
						<view class="disFlex">
							<view class="flex1">
								已领取/未领取：
							</view>
							<view class="flex1 teAliRight col99c043">
								{{picAry0[picVal0].name}}
								<image :src="baseUrl + 'iconBottomGreen.png'" mode="aspectFit"
									class="w50r h50r poRel top14r"
								></image>
							</view>
						</view>
					</picker>
					<view class="p20r">
						<view v-for="(item, index) in data1List" :key="item.id"
							class="backColWhite bSha0010u0rgb00001 borRad10r p20r mb20r"
						>
							<view class="disFlex">
								<view class="flex1">
									<text class="col999">
										赠送时长：
									</text>
									{{item.month}}个月
								</view>
								<view class="flex1 teAliRight">
									<text class="col999">
										购买/赠送：
									</text>
									{{
										item.source == 1 ? '购买' :
										item.source == 2 ? '赠送' : item.source
									}}
								</view>
							</view>
							<view class="disFlex mt20r">
								<view :class="['flex1', item.status == 1 ? 'colC72d21' : 'col47ce68']">
									<text class="col999">
										已领取/未领取：
									</text>
									{{
										item.status == 1 ? '未领取' :
										item.status == 2 ? '已领取' : item.status
									}}
								</view>
								<view class="flex1 teAliRight colFf3627">
									<text class="col999">
										赠送价格：
									</text>
									¥{{item.price}}
								</view>
							</view>
							<view class="mt10r disFlex aliItCenter h50r">
								<view class="flex1">
									<text class="col999">
										创建时间：
									</text>
									{{item.date}}
								</view>
								<view v-if="item.status == 1" @click="cliReceiveBtn(item.id, index)"
									class="w100r lh50r backCol99c043 borRad25r teAliCenter bSha0a4a10aCcc colFff"
								>
									领取
								</view>
							</view>
						</view>
						<view class="lh100r teAliCenter col999" v-if="data1More == true && data1List.length">
							已加载全部
						</view>
						<view class="poAbs top50P left50P trTrn50Pn50P teAliCenter col999" v-if="data1List.length == 0">
							暂无数据
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { getMemberCardruleInfo, getMemberCardruleList,
	memberGetMemberCard } from '@/utils/api.js'
import { baseUrl } from '@/utils/request.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			token: '',
			calcNum: 0,
			nowCurrent: 0,
			myCardInfo: '',
			data0Tri: false, data0List: [], data0More: false, data0Page: 0,
			picVal0: 1, picAry0: [
				{name: '已领取', value: 2}, { name: '未领取', value: 1 }
			],
			data1Tri: false, data1List: [], data1More: false, data1Page: 0,
			
		}
	},
	onLoad() {
		const token = uni.getStorageSync('token');
		if(token) {
			this.token = token;
			this.getDataList0();
			this.getDataList1(0);
			this.getDataList2(0);
		}else {
			this.token = '';
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		cliTopList(type) {
			if(type != this.nowCurrent) {
				this.nowCurrent = type;
			}
		},
		topTotalHeight(height) {
			// #ifdef MP-WEIXIN
				this.calcNum = height + 45;
			// #endif
			// #ifdef H5
				this.calcNum = 45;
			// #endif
		},
		swiperChaFun(eee) {
			if (eee.detail.source == 'touch') {
				this.nowCurrent = eee.detail.current;
			}
		},
		getDataList0() {
			getMemberCardruleInfo({token: this.token}).then(res => {
				// console.log('00', res)
				if(res.data) {
					this.myCardInfo = res.data;
				}else {
					this.myCardInfo = '';
				}
			})
		},
		getDataList1(page, callBack) {
			// uni.showLoading({ title: '加载中...' })
			getMemberCardruleList({
				token: this.token, number: 10,
				page, source: 1
			}).then(res => {
				// console.log('11', res)
				if(res.data && res.data.data) {
					if(page > 0) {
						this.data0List = this.data0List.concat(res.data.data);
					}else {
						this.data0List = res.data.data;
					}
					if(res.data.number < 10) this.data0More = true;
				}
				// uni.hideLoading();
				if(callBack) callBack();
			})
		},
		getDataList2(page, callBack) {
			getMemberCardruleList({
				token: this.token, number: 10,
				page, source: 2, status: this.picAry0[this.picVal0].value
			}).then(res => {
				console.log('22', res)
				if(res.data && res.data.data) {
					if(page > 0) {
						this.data1List = this.data1List.concat(res.data.data);
					}else {
						this.data1List = res.data.data;
					}
					if(res.data.number < 10) this.data1More = true;
				}
				// uni.hideLoading();
				if(callBack) callBack();
			})
		},
		orderScroll() {
			if(this.nowCurrent == 1) {
				if(!this.data0More) {
					this.data0Page += 1;
					this.getDataList1(this.data0Page);
				}
			}else if(this.nowCurrent == 2) {
				if(!this.data1More) {
					this.data1Page += 1;
					this.getDataList2(this.data1Page);
				}
			}
		},
		orderRefresh() {
			if(this.nowCurrent == 1) {
				if(!this.data0Tri) {
					this.data0Tri = true;
					this.data0More = false;
					this.data0Page = 0;
					this.getDataList1(0, () => {
						this.data0Tri = false;
					});
				}
			}else if(this.nowCurrent == 2) {
				if(!this.data1Tri) {
					this.data1Tri = true;
					this.data1More = false;
					this.data1Page = 0;
					this.getDataList2(0, () => {
						this.data1Tri = false;
					});
				}
			}
		},
		picChaFun0(eee) {
			this.picVal0 = eee.detail.value
			this.data1More = false;
			this.data1Page = 0;
			this.getDataList2(0);
		},
		cliReceiveBtn(id, index) {
			uni.showModal({
				title: '提示', content: '确定立即领取此会员卡？', confirmColor: '#99c043',
				success:res1 => {
					if (res1.confirm) {
						memberGetMemberCard({
							token: this.token, id
						}).then(res2 => {
							this.getDataList0();
							this.data1List[index].status = 2;
							uni.showToast({
								title: '领取成功', duration: 3000
							})
						})
					}
				}
			})
		}
	}
}
</script>
<style>
</style>